<template>
  <!-- 产品管理 分页 -->
  <div class="productLists">
    <!-- 列表 -->
    <div v-if="visiable">
      <!-- 卡片 -->
      <div
        class="kp"
        v-loading="proLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0)"
      >
        <el-row v-if="!isTableList">
          <el-col :span="6" v-for="(item, index) in imageList" :key="index">
            <!-- key   targetType 目标id/connectionType 文件类型/id 文件id -->
            <productImage
              class="image-unit"
              :isChoosed="
                getChoosed(
                  `${item.targetType}-${item.connectionType}-${item.id}`
                )
              "
              :isBottom="false"
              :fileName="item.fileName"
              @click.native="
                unitClick(
                  `${item.targetType}-${item.connectionType}-${item.id}`
                )
              "
            >
              <div
                class="image-checkbox"
                slot="image-checkbox"
                @click="clickImageCheckbox"
              >
                <el-checkbox
                  v-model="
                    checkboxVal[
                      `${item.targetType}-${item.connectionType}-${item.id}-${item.fileUrl}`
                    ]
                  "
                ></el-checkbox>
              </div>
              <div
                class="image-preview flex-center"
                slot="image-preview"
                @click="(e) => getImageDetail(e, item)"
              >
                <el-tooltip effect="dark" content="查看详情" placement="bottom">
                  <div class="icon"></div>
                </el-tooltip>
              </div>

              <div slot="img" class="image-img">
                <img :src="item.thumbnail" alt=" " />
              </div>
              <div slot="sx">
                {{
                  item.connectionType === 2
                    ? item.imageSize
                    : item.formatDuration
                }}
              </div>
            </productImage>
          </el-col>
        </el-row>
        <el-row v-else>
          <ul class="listTitle">
            <el-checkbox style="opacity: 0"></el-checkbox>
            <!-- <li>序号</li> -->
            <li>文件名称</li>
            <li>类型</li>
            <!-- <li>页数</li> -->
            <li>来源</li>
            <li>大小</li>
            <li>上传时间</li>
            <!-- <li>标签</li> -->
            <li>下载量</li>
            <li>上传人</li>
            <li>审核状态</li>
            <li>操作</li>
          </ul>
          <div class="list-table">
            <!-- 数据未加载出来时显示 -->
            <!-- <p class="nodata" v-if="dataInfoList.length == 0">当前条件下无数据。</p> -->
            <ul v-for="(item, index) in imageList" :key="index">
              <!-- <el-checkbox-group
                v-model="checkedCities"
                @change="handleCheckedCitiesChange"
              >
                <el-checkbox :label="item">{{ item }}</el-checkbox>
              </el-checkbox-group> -->
              <div
                class="image-checkbox"
                slot="image-checkbox"
                @click="clickImageCheckbox"
              >
                <el-checkbox
                  v-model="
                    checkboxVal[
                      `${item.targetType}-${item.connectionType}-${item.id}-${item.fileUrl}`
                    ]
                  "
                ></el-checkbox>
              </div>
              <!-- <li>{{ index + 1 }}</li> -->
              <li :title="item.fileName">{{ item.fileName }}</li>
              <li>
                {{ item.fileType }}
              </li>
              <!-- <li >{{ item.pageNumber }}</li> -->

              <li>{{ item.fileUrl }}</li>
              <li>{{ item.formatFileSize }}</li>
              <li>{{ item.createDate.slice(0, 10) }}</li>
              <!-- <li style="background: 'red'">

                <tagsGroup
                  :showTagsArr="[item.categoryTypeList[0].id]"
                ></tagsGroup>
              </li> -->
              <li>{{ item.downloads }}</li>
              <li>{{ item.operator }}</li>
              <li>
                <span :class="getExamineClass(item.isExamine)">{{
                  getExamineType(item.isExamine)
                }}</span>
              </li>
              <li class="flex-center">
                <!-- <div @click="compile(item)">
                  <img src="../assets/common/edit.png" alt="" />
                  <span>编辑</span>
                </div> -->
                <div
                  @click="(e) => getImageDetail(e, item)"
                  class="flex-center"
                  style="cursor: pointer"
                >
                  <img
                    src="@/assets/common/view.png"
                    alt=""
                    style="margin-right: 0.06rem; cursor: pointer"
                  />
                  <span>详情</span>
                </div>
                <!-- <div @click="del(item.id)">
                  <img src="../assets/common/del.png" alt="" />
                  <span>删除</span>
                </div> -->
              </li>
            </ul>
          </div>
        </el-row>
      </div>
      <!-- 分页 -->
      <div class="pro-pagination">
        <span class="download-all" @click="downloadAll">
          <el-tooltip effect="dark" content="下载" placement="top">
            <i class="el-icon-download"></i>
          </el-tooltip>
        </span>
        <el-tooltip effect="dark" content="点击切换" placement="bottom">
          <div
            class="icon-tran"
            :class="[isTableList ? 'table' : '']"
            @click="showTableList"
          ></div>
        </el-tooltip>
        <el-pagination
          background
          layout="prev, pager, next, total, jumper"
          :current-page="proParams.pageNum"
          :page-size="proParams.pageSize"
          :total="proParams.total"
          small
          @current-change="handleCurrentChange"
          class="pagination"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 详情 -->
    <div v-else>
      <!-- 视频播放位置 -->
      <div class="detail">
        <div class="back">
          <i class="el-icon-arrow-left"></i>
          <span @click="gotoBack">返回上一层</span>
          <span class="download" @click="download">
            <el-tooltip effect="dark" content="下载" placement="top">
              <i class="el-icon-download"></i>
            </el-tooltip>
          </span>
        </div>

        <div class="content">
          <proVideoDetail :proItem="proItem" />
        </div>
      </div>
      <!-- 相关内容 -->
      <div class="list">
        <div class="back">评价：</div>
        <div class="evalute">
          <p v-if="showEvaluate" class="noEvaluate">暂无评价</p>
          <ul
            class="evaluateList"
            v-for="(item, index) in evaluateList"
            :key="index"
          >
            <li>
              <dd>
                <span>{{ item.loginName }}</span
                ><span v-if="item.score === 1">(清晰度：模糊)</span
                ><span v-if="item.score === 2">(清晰度：一般)</span
                ><span v-if="item.score === 3">(清晰度：清晰)</span>
              </dd>
              <dt>{{ item.createTime }}</dt>
            </li>
            <li>{{ item.evaluate }}</li>
          </ul>
        </div>
        <!-- <el-row class="content">
          <el-col :span="4" v-for="(item, index) in imageList" :key="index">
            <productImage
              v-if="index <= 5"
              class="image-unit"
              :isChoosed="getChoosed_2(index)"
              :isBottom="true"
              :fileName="item.fileName + '.' + item.fileType"
              @click.native="unitClick(index)"
            >
              <div
                class="image-preview-2"
                slot="image-preview"
                @click="(e) => getImageDetail(e, item)"
              ></div>
              <div slot="img" class="image-img-2">
                <img :src="item.thumbnail" alt=" " />
              </div>
              <div slot="sx">
                {{
                  item.connectionType === 2
                    ? item.imageSize
                    : item.formatDuration
                }}
              </div>
            </productImage>
          </el-col>
        </el-row> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import productImage from "@/components/productInfo/productImage.vue";
import proVideoDetail from "@/components/productInfo/proVideoDetail.vue";
export default {
  components: {
    productImage,
    proVideoDetail,
  },
  props: {
    imageList: {
      type: Array,
    },
    pageNumSearch: {
      type: Function,
    },
    getIsDetail: {
      type: Function,
    },
    getSelectedId: {
      type: Function,
    },
  },
  data() {
    return {
      choosedUnit: [],
      visiable: true,
      checkboxVal: {},
      isTableList: false, // 是否表格展示
      showEvaluate: false,
      evaluateList: [],
    };
  },
  updated() {
    console.log(888, this.imageList);
  },
  computed: {
    ...mapState({
      proParams: (state) => state.qbShow.proParams,
      proLoading: (state) => state.qbShow.proLoading,
      proItem: (state) => state.qbShow.proItem,
      // evaluateList: () => [],
    }),
  },
  watch: {},
  created() {},
  methods: {
    getExamineType(type) {
      if (type == 1) {
        return "未审核";
      } else if (type == 2) {
        return "审核通过";
      } else if (type == 3) {
        return "废弃";
      } else if (type == 4) {
        return "存疑";
      }
    },
    getExamineClass(type) {
      if (type == 1) {
        return "examine1";
      } else if (type == 2) {
        return "examine2";
      } else if (type == 3) {
        return "examine3";
      } else if (type == 4) {
        return "examine4";
      }
    },
    // 评分接口
    /* async dataEvaluate(id) {
      let data = await this.$api.selectEvaluate({
        connectionType: this.proItem.connectionType,
        id: id,
      });
      console.log(data);
      if (data.list.length == 0) {
        this.showEvaluate = true;
      } else {
        this.evaluateList = data.list;
      }

      // this.valuation = false;
    }, */
    // 是否用列表展示
    showTableList() {
      this.isTableList = !this.isTableList;
      // console.log(this.imageList);
    },
    // 是否是选中状态
    getChoosed(index) {
      const _choosedUnit = this.choosedUnit.filter((item) => item === index);
      return _choosedUnit.length !== 0 || this.checkboxVal[index];
    },
    // 是否是选中状态(视频详情)
    getChoosed_2(index) {
      const list = this.choosedUnit.filter((item) => item === index);
      return list.length !== 0;
    },
    // 选中/取消选中  // 图片单选
    unitClick(index) {
      const list = this.choosedUnit.filter((item) => item === index);
      if (list.length !== 0) {
        this.choosedUnit = [];
      } else {
        this.choosedUnit = [index];
      }
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNumSearch({ pageNum: val });
    },
    // 选中框 多选
    clickImageCheckbox(e) {
      console.log(e);
      // 取消向上冒泡事件
      e.stopPropagation();
      this.getSelectedId({ checkboxVal: this.checkboxVal });
    },
    // 详情
    getImageDetail(e, item) {
      console.log(123, e);
      // 取消向上冒泡事件
      e.stopPropagation();
      // 查看详情
      this.$store.dispatch("qbShow/findById", {
        params: {
          connectionType: item.connectionType,
          id: item.id,
        },
        setVisiable: () => {
          this.visiable = false;
          this.$emit("getImageDetail", this.visiable);
          this.evaluateList = [];
          this.$api
            .selectEvaluate({
              connectionType: item.connectionType,
              id: item.id,
            })
            .then((data) => {
              if (data.list.length == 0) {
                this.showEvaluate = true;
              } else if (data.list.length >= 1) {
                this.showEvaluate = false;
                // this.$set(this.evaluateList, 0, data.list);
                this.evaluateList = data.list;
              }
            });
          // 切换右侧展示内容
          this.getIsDetail({ isDetail: false, visiable: false });
        },
      });

      // 浏览量
      this.updateById({
        connectionType: item.connectionType,
        id: item.id,
        viewNumber: 1,
      });
    },
    // 下载量/浏览量
    updateById(params) {
      this.$store.dispatch("qbShow/updateById", {
        params,
      });
    },
    // 返回
    gotoBack() {
      this.visiable = true;
      // 切换右侧展示内容
      this.getIsDetail({ isDetail: true, visiable: true });
    },
    // 文件批量下载
    downloadAll() {
      console.log(111, this.checkboxVal);
      let str = ""; // 接口数据参数
      if (Object.keys(this.checkboxVal).length == 0) {
        // alert("请至少选择一项");
        this.$message({
          type: "warning",
          message: "请至少选择一项",
          showClose: true,
        });
        return;
      }
      for (let key in this.checkboxVal) {
        let arr = key.split("-");
        if (this.checkboxVal[key]) {
          let fileName = arr[3].substring(
            // arr[3].lastIndexOf("/") + 1,
            arr[3].indexOf("upload"),
            arr[3].length
          );
          // str += `list=${arr[1]}/${fileName}&`;
          str += `list=${fileName}&`;
        }
      }
      str = str.substring(0, str.length - 1);
      // console.log(222, str);
      url = encodeURI(url);
      let url = `${window.VUE_APP_BASE_URL_SHOW}/qbservices/file/fileZipDown?${str}`;
      console.log(2342, url);
      window.open(url);
    },
    // 文件下载
    download() {
      console.log("this.proItem", this.proItem);
      let url = `${window.VUE_APP_BASE_URL_SHOW}/qbservices/file/fileDown?`;
      const fileUrl = this.proItem.fileUrl + "";
      // const connectionType = this.proItem.connectionType;
      const fileName = fileUrl.substring(
        // fileUrl.lastIndexOf("/") + 1,
        fileUrl.indexOf("upload"),
        fileUrl.length
      );
      // const uploadFileName = this.proItem.uploadFileName;
      // url += "connectionType=" + connectionType;
      url += "fileName=" + fileName;
      // url += "&uploadFileName=" + uploadFileName;
      url = encodeURI(url);
      console.log(2342, url);
      window.location.href = url;
      // 下载量
      this.updateById({
        connectionType: this.proItem.connectionType,
        id: this.proItem.id,
        downloads: 1,
      });
    },
    click(i) {
      console.log(i);
    },
  },
};
</script>

<style lang="scss">
.productLists {
  @import "~@/styles/mixin.scss";
  padding-top: 0.2rem;
  width: 100%;
  .kp {
    // height: 76vh;
    min-height: 78vh;
  }
  .image-unit {
    position: relative;
    width: 100%;
    .image-preview {
      position: absolute;
      right: 0.2rem;
      bottom: 0.7rem;
      width: 0.42rem;
      height: 0.42rem;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 0.05rem;
      cursor: pointer;
      .icon {
        width: 100%;
        height: 100%;
        background-image: url(~@/assets/images/enlarge@2x.png);
        background-repeat: no-repeat;
        background-size: 0.22rem 0.22rem;
        background-position: center;
      }
    }
    .image-checkbox {
      position: absolute;
      right: 0.17rem;
      top: 0.1rem;
      width: 0.2rem;
      height: 0.2rem;
      cursor: pointer;
    }
    .image-preview-2 {
      position: absolute;
      right: 0.15rem;
      bottom: 0.65rem;
      width: 0.22rem;
      height: 0.22rem;
      background-image: url(~@/assets/images/enlarge@2x.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      cursor: pointer;
    }
    .image-img {
      img {
        width: 100%;
        height: 18.5vh;
        border-radius: 0.1rem;
        text-align: center;
      }
    }
    .image-img-2 {
      img {
        width: 100%;
        height: 13.5vh;
        border-radius: 0.1rem;
        text-align: center;
      }
    }
  }
  .pro-pagination {
    position: relative;
    text-align: right;
    z-index: 100;
    // margin-top: 0.05rem;
    .el-pagination {
      position: absolute;
      top: -0.1rem;
      position: absolute;
      right: 0.1rem;
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #2a9dff;
      color: #ffffff;
    }
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .el-pager li {
      background-color: #034475;
    }
    .el-pagination--small .el-pagination__editor.el-input .el-input__inner {
      background: #034475;
      border: 0px;
    }
    .el-pagination--small span:not([class*="suffix"]),
    .el-pagination--small button {
      color: #034475;
      margin-left: 20px;
    }
    .el-pagination .btn-prev .el-icon,
    .el-pagination .btn-next .el-icon {
      color: #ccc;
    }
    .el-pagination.is-background .btn-prev:hover,
    .el-pagination.is-background .btn-next:hover,
    .el-pagination.is-background .el-pager li:hover {
      background-color: #2a9dff;
      color: #fff;
    }
    .el-pagination.is-background .el-pagination__total,
    .el-pagination.is-background .el-pagination__jump {
      color: #2a9dff;
      font-weight: 600;
    }
    .el-pagination.is-background .el-pagination__jump .el-input__inner {
      color: #fff;
      font-weight: 600;
    }
  }
  .download-all {
    position: absolute;
    left: 0;
    top: -0.04rem;
    color: #2a9dff;
    margin-left: 2%;
    i {
      font-size: 16px;
    }
  }
  .icon-tran {
    &.table {
      background-image: url(~@/assets/images/list_icon.png);
    }
    position: absolute;
    left: 3.5%;
    top: 0;
    color: #2a9dff;
    margin-left: 2%;
    background-image: url(~@/assets/images/thumbnail_switch@2x.png);
    width: 0.18rem;
    height: 0.18rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
  }
  .detail {
    .back {
      color: #2a9dff;
      cursor: pointer;
      margin-left: 0.4rem;
      .download {
        width: 0.2rem;
        // font-size: 0.16rem;
        margin-left: 10rem;
      }
    }
    .content {
      width: 100%;
      height: 62vh;
      // height: 6rem;
      // border: 1px solid #459beb;
      // margin-top: -20px;
      border-radius: 5px;
      margin-top: 0.1rem;
      margin-bottom: 0.1rem;
    }
  }
  .list {
    .back {
      color: #2a9dff;
      margin-top: 5px;
      padding-bottom: 5px;
      border-bottom: 1px solid #034475;
    }
    .evalute {
      height: 1.2rem;
      @include scrollBar;
      overflow-y: auto;
      .evaluateList {
        width: 100%;
        margin: 0 auto;
        padding: 0.2rem 0.4rem;
        border-bottom: 2px solid #404040;
        li {
          display: flex;
          margin-top: 0.1rem;
          justify-content: space-between;
          dd {
            span:nth-of-type(1) {
              margin-right: 0.4rem;
              font-size: 0.14rem;
              font-family: Alibaba PuHuiTi;
              font-weight: 400;
              color: #898988;
            }
            span:nth-of-type(2) {
              font-size: 0.14rem;
              font-family: Alibaba PuHuiTi;
              font-weight: 400;
              color: #fba613;
            }
          }
          dt {
            font-size: 0.14rem;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #ffffff;
          }
        }
        li:nth-of-type(2) {
          font-size: 0.18rem;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
    .content {
      margin-top: 5px;
    }
    .noEvaluate {
      width: 200px;
      text-align: center;
      color: #ffffff;
      margin: 10px auto;
    }
  }

  .listTitle {
    height: 0.54rem;
    line-height: 0.54rem;
    display: flex;
    background: #034576;
    font-size: 0.16rem;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #cccccc;
    li {
      width: 1.8rem;
      text-align: center;
    }
    ::v-deep.el-checkbox__inner {
      margin: 0 0.21rem 0 0.24rem;
    }
  }
  .list-table {
    max-height: calc(100% - 1.6rem);
    overflow: auto;
    ::v-deep.el-checkbox__label {
      display: none;
    }
    .nodata {
      width: 100%;
      color: #fff;
      margin-top: 1rem;
      text-align: center;
    }
    ul {
      height: 0.5rem;
      line-height: 0.5rem;
      display: flex;
      font-size: 0.14rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #ffffff;
      li {
        width: 1.8rem;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      ::v-deep.el-checkbox__inner {
        margin: 0 0.21rem 0 0.24rem;
      }
      li:nth-of-type(12) {
        display: flex;
        height: 0.54rem;
        line-height: 0.54rem;
        margin-left: 0.14rem;
        div {
          width: 0.7rem;
          height: 0.28rem;
          background: #1890ff;
          border-radius: 0.05rem;
          text-align: center;
          line-height: 0.28rem;
          margin-right: 0.1rem;
          margin-top: 0.13rem;
          img {
            width: 0.14rem;
            height: 0.14rem;
            margin-top: 0.07rem;
            margin-right: 0.02rem;
          }
          span {
            font-size: 0.14rem;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #ffffff;
          }
        }
        div:nth-of-type(3) {
          background: #e64f4f;
        }
      }
    }
  }
  .list-table,
  .listTitle {
    li:nth-of-type(2) {
      width: 0.8rem;
      // margin-left: 0.24rem;
    }
    li:nth-of-type(4) {
      width: 1.2rem;
      margin: 0 0.1rem 0 0.2rem;
    }
    li:nth-of-type(5) {
      width: 1.44rem;
    }
    li:nth-of-type(6) {
      margin: 0 0.06rem;
    }
    li:nth-of-type(7) {
      width: 1.1rem;
    }
    li:nth-of-type(8) {
      width: 1.2rem;
    }
    li:nth-of-type(9) {
      width: 1rem;
    }
    ::v-deep.group .tag {
      margin: auto;
    }
    li:nth-of-type(11) {
      box-sizing: border-box;
      margin-right: 0.06rem;
    }
    li:nth-of-type(12) {
      width: 2.26rem;
      margin-left: 0.14rem;
    }
    li:nth-of-type(1) {
      width: 1.8rem;
      margin-left: 0.1rem;
    }
  }
}
.examine1 {
  color: #409eff;
}
.examine2 {
  color: #67c23a;
}
.examine3 {
  color: #f56c6c;
}
.examine4 {
  color: #e6a23c;
}
</style>
